<template>
    <view class="post-content">
        <view class="two style2 post">
            <view class="inner" v-cloak>
                <view class="box">
                    <view class="image fit post-data-img">
                        <image
                            style="height: 300rpx"
                            mode="scaleToFill"
                            @error="imageError('h')"
                            indicator-color="#fff"
                            :src="post_data.img"
                        ></image>
                    </view>
                    <view class="article-content-box">
                        <view class="align-center post-header" v-if="post_data.create_time">
                            <view class="h2">{{ post_data.title }}</view>
                            <view v-if="post_data.is_md !== 1" class="icon-list">
                                <view class="flex icon-item">
                                    <uni-icons class="mr-6" color="#999" type="calendar" size="18"></uni-icons>
                                    <text class="">{{ post_data.create_time }}</text>
                                </view>
                                <view class="flex icon-item">
                                    <uni-icons class="mr-6" color="#999" type="staff-filled" size="18"></uni-icons>
                                    <text @click="jump">{{ post_data.comment_count?post_data.comment_count : 0 }}</text>
                                </view>
                                <view class="flex icon-item">
                                    <uni-icons class="mr-6" color="#999" type="eye" size="18"></uni-icons>
                                    <text>{{ post_data.look }}</text>
                                </view>
                                <view class="flex icon-item">
                                    <uni-icons class="mr-6" color="#999" type="list"></uni-icons>
                                    <navigator :url="`/pages/articleList/index?cid=${post_data.cid}?index=false`">{{ post_data.cate_name }}</navigator>
                                </view>
                            </view>
                            <p>{{ post_data.desc }}</p>
                        </view>
                        <template v-if="post_data.is_md === 1">
                            <view>
                                <input class="uni-input pass-input" type="text" :focus="renameFocus" name="query" v-model="passValue" placeholder="这是一篇私密文章噢~有些内容可能不想给你看">
                                <text style="color: red;margin-top: 6rpx;display: inline-block"
                                      v-if="pass_status">密码不正确！</text>
                                <view class="align-center">
                                    <button @click="sendArticlePass" class="pass-button">提交</button>
                                </view>
                            </view>
                        </template>
                        <template v-else>
                            <mp-html selectable set-title use-anchor lazy-load :content="post_data.content" />
                        </template>
                        <view class="tag-content" v-if="post_data.keywords">
                            <template v-for="(item,index) in post_data.keywords">
                                <navigator class="tag-item" :url="`/pages/search/index?key=${item}`" :key="index">#{{ item }}</navigator>
                            </template>
                        </view>
                        <view class="page-content">
                            <navigator class="next page-box" v-if="next" :url="nextLink">
                                <image
                                    v-if="next.id"
                                    class="page-box-img"
                                    mode="scaleToFill"
                                    @error="imageError('n')"
                                    :src="nextImg"
                                ></image>
                                <view class="page-box-text">
                                    <view class="page-text">上一篇</view>
                                    <view class="page-title">{{ next.title }}</view>
                                </view>
                            </navigator>
                            <navigator class="prev page-box" v-if="prev" :url="prevLink">
                                <image
                                    v-if="prev.id"
                                    class="page-box-img"
                                    mode="scaleToFill"
                                    @error="imageError('p')"
                                    :src="prevImg"
                                ></image>
                                <view class="page-box-text">
                                    <view class="page-text">下一篇</view>
                                    <view class="page-title">{{ prev.title }}</view>
                                </view>

                            </navigator>
                        </view>
                        <view class="like-article-list">
                            <view class="article_list_title">📒&nbsp;相关文章</view>
                            <view class="like_article">
                                <view class="like_article-item" v-for="(item,index) in like_article" :key="index">
                                    <navigator class="like-article-text" :url="`/pages/post/index?id=${item.id}&cid=${item.cid}&index=${is_index}`">
                                        <text class="me-3 badge" :class="'badge-'+(index+1)">{{index+1}}</text>{{ item.title }}</navigator>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="tool-content">
                <view class="tool-item weixin" open-type="share">
                    <uni-icons class="tool-icon" color="#fff" size="25" type="weixin"></uni-icons>
                    <view class="tool-text">微信转发</view>
                </view>
                <view class="tool-item" @click="copyLink">
                    <uni-icons class="tool-icon" color="#fff" size="25" type="link"></uni-icons>
                    <view class="tool-text">复制链接</view>
                </view>
            </view>
        </view>
        <canvas canvas-id="canvas" id="canvas" type="2d" style="width:100px; height:100px" />
       <Comment class="comment-content" :comment_list="comment_list" :comment_inputs_show="comment_inputs_show_props"
                 @refresh_comment="getComment"/>
    </view>
</template>

<script>
import Comment from '@/components/Comment'
import mpHtml from '@/components/mp-html/mp-html'
import {commentList, getArticle, getLikeArticle, getPage} from "@/api";
import {mapGetters} from "vuex";

export default {
    components: {
        Comment,
        mpHtml
    },
    computed: {
        nextLink() {
            return `/pages/post/index?id=${this.next.id}&cid=${this.cid}&index=${this.is_index}`
        },
        prevLink() {
            return `/pages/post/index?id=${this.prev.id}&cid=${this.cid}&index=${this.is_index}`
        },
        ...mapGetters(['config']),
    },
    data() {
        return {
            passValue: '',
            renameFocus: false,
            nextImg: '',
            prevImg: '',
            seoTitle: '',
            id: '',
            cid: '',
            is_index: '',
            search: '',
            dom_id: '',
            viewer: {},
            notification: true,
            comment_inputs_show_props: true,
            next: {},
            prev: {},
            nav_list: [],
            link_list: [],
            like_article: [],
            post_data: {},
            comment_list: [],
            pass_status: false
        }
    },
    // 分享
    onShareAppMessage(res) {
        // 来自页面内的按钮的转发
        if (res.from == 'button') {
            console.log("按钮转发--配置");
        }
        // 当前路径
        let pages = getCurrentPages(),
            // 获取当前页面的对象
            view = pages[pages.length - 1];
        return {
            title: this.post_data.title,
            path: `${view.route}?id=${this.id}&cid=${this.cid}`,
            imageUrl: this.post_data.img
        }
    },
    methods: {
        copyLink() {
            uni.setClipboardData({
                data: `http://blog.musclewiki.cn/post/${this.id}?cid=${this.cid}&index=true`,//要被复制的内容
                success:() => {
                    uni.showToast({
                        title:'复制链接成功'
                    })
                }
            });
        },
        imageError(type) {
            if(type === 'p') {
                this.prevImg = 'https://picsum.photos/id/10/1100/328'
                return
            }
            if(type === 'n') {
                this.prevImg = 'https://picsum.photos/id/11/1100/328'
                return
            }
            this.post_data.img = 'https://picsum.photos/id/10/1100/328'
        },
        // 锚点跳转
        jump() {
            uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点：类或者id
                uni.createSelectorQuery().select(".post-content").boundingClientRect(res=>{//最外层盒子的节点：类或者id
                    uni.pageScrollTo({
                        duration: 100,//过渡时间
                        scrollTop:(data.top+450) - res.top  ,//到达距离顶部的top值
                    })
                }).exec()
            }).exec();
        },
        // 设置标题
        setBarTitleText() {
            uni.setNavigationBarTitle({
                title: this.post_data.title
            });
        },
        getPostById() {
            // let seoTitle = store.getters.config.seo_name;
            // 文章详情
            let articlePass = this.$store.getters.articlePass || '';
            const p = {id: this.id, pass: articlePass}
            getArticle(p).then(res => {
                let data = res;
                this.post_data = {
                    ...data,
                    content: data.content.replace(/lang-/g, "language-"), // 将 lang- 的 class 替换为 language-
                    img: data.pic ? data.pic : "https://picsum.photos/id/" + data.id + "/1100/328" || 'https://picsum.photos/id/10/1100/328',
                    cate_name: data.catename,
                }
                this.post_data.is_md = data.is_md ? articlePass ? 0 : 1 : 0;

                this.setBarTitleText()
            }).catch(() => {
            })

            // 上下翻页
            this.getPrevNext()

            // 相关文章
            this.getLikeArticle()
        },
        getLikeArticle() {
            getLikeArticle({id: this.id, cid: this.cid, is_index: this.is_index}).then(res => {
                this.like_article = res;
            })
        },
        getPrevNext() {
            getPage({id: this.id, cid: this.cid, is_index: this.is_index, search: this.search}).then(res => {
                this.prev = res.prev ? res.prev : "";
                this.next = res.next ? res.next : "";
                this.nextImg = `https://picsum.photos/id/${this.next.id}/1100/328`
                this.prevImg = `https://picsum.photos/id/${this.prev.id}/1100/328`
            });
        },
        // localStorage取出信息，如果存在则不显示姓名跟邮箱的输入框
        replyDataStorage() {
            if(!uni.getStorageSync("reply_data")) return
            let reply_data = JSON.parse(uni.getStorageSync("reply_data")); // 取出用户信息
            if (reply_data) {
                this.comment_inputs_show_props = false;
            }
        },
        sendArticlePass() {
            let pass = this.passValue;
            let id = this.id;
            if (!pass) {
                this.renameFocus = true;
                return;
            }
            const p = {id: id, pass: pass}
            getArticle(p).then(res => {
                if (res.code === false) {
                    this.pass_status = true;
                    this.renameFocus = true;
                    setTimeout(() => {
                        this.pass_status = false;
                    }, 1000);
                    return
                }
                this.$store.dispatch('app/setArticlePass', pass)
                this.getCurArticle();
                this.post_data.is_md = 0;
            });
        },
        getCurArticle() {
            let id = this.id;
            let pass = this.$store.getters.articlePass || null;
            const p = {id: id, pass: pass}
            getArticle(p)
                .then(res => {
                    let data = res;
                    // if(data.code === 404) {this.$router.push('/error');return;}
                    this.post_data = {
                        content: data.content.replace(/lang-/g, "language-"),
                        title: data.title,
                        desc: data.desc,
                        create_time: data.create_time,
                        img: data.pic
                            ? data.pic
                            : "https://picsum.photos/id/" + data.id + "/1100/328",
                        img_style: data.pic ? "height:115%" : "",
                        look: data.look + "次阅读",
                        cate_name: data.catename,
                        cid: data.cid,
                        keywords: data.keywords,
                        is_md: data.is_md
                    };
                    this.post_data.is_md = data.is_md ? pass ? 0 : 1 : 0;
                })
        },
        //评论列表
        getComment() {
            commentList({id: this.id})
                .then(data => {
                    this.comment_list = data.comment;
                    this.post_data.comment_count = data.count;
                })
        },
    },
    onLoad(option) {
        // 解决地址变化，页面不变
        this.id = option.id;
        this.cid = option.cid;
        this.is_index = option.index;
        this.getPostById()
        this.replyDataStorage();
        this.getComment();
    }
}
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}
.next {
    margin-bottom: 20rpx;
}
::v-deep .me-3 {
    margin-right: 0.6rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
::v-deep .badge {
    min-width: 0.325rem;
    background-color: #adb5bd;
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
::v-deep {
    .badge.badge-1 {
        background-color: #e04a1d;
    }
    .badge.badge-2 {
        background-color: #f88217;
    }
    .badge.badge-3 {
        background-color: #ffb916;
    }
}
.tool-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 0.6rem;
    margin-top: 50rpx;
}
.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
}
.tool-item:first-child {
    margin-right: 70rpx;
}
.tool-icon {
    text-align: center;
    background-color:  rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 78rpx;
    margin-bottom: 20rpx;
}
.tool-item.weixin .tool-icon {
    background-color: #1AAD19;
}
.pass-input {
    border: 1px solid rgba(144, 144, 144, 0.25);
    height: 43px;
    border-radius: 5px;
    background: rgba(144, 144, 144, 0.075);
}
.pass-button {
    width: 200rpx;
    margin: 30rpx auto;
    box-sizing: border-box;
}
::v-deep .icon-item {
    flex-direction: row;
    margin-right: 0.756rem;
    max-width: 240rpx;
    font-size: 28rpx;
    &:last-child {
        margin-right: 0;
    }
}
.icon-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
::v-deep ._select._root {
    display: contents;
}
.article-content-box {
    padding: 0 .6rem;
}
.page-box {
    position: relative;
    height: 200rpx;
    width: 100%;
    display: inline-block;
    border-radius: 10rpx;
    overflow: hidden;
}
.page-box-text {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(45,45,45,.3);
    padding: 10rpx 20rpx;
    height: 60%;
}
.page-text {
    font-size: 36rpx;
    color: #eee;
}
.page-box-img {
    height: 100%;
    background-color: #505050;
}
.page-title {
    color: #fff;
    margin-top: 0;
    width: 100%;
    font-size: 28rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tag-content {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx 0 40rpx 0;
}
.tag-item {
    color: #fff;
    background-color: #00B0FB;
    padding: 2rpx 10rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 15rpx;
}
.article_list_title {
    margin-bottom: 16rpx;
}
.like-article-list {
    margin-top: 40rpx;
}
.like-article-text {
    font-size: 30rpx;
}
</style>
